<template>
	<view class="conten">
		<view class="navbar" >
			<!-- :style="`height: ${statusBarHeight}px;`" -->
			 <view  class="status-bar" :style="`height: ${statusBarHeight}px;`"></view>
			 <slot name="nav-icon">
				 <topbar></topbar>
			</slot>
			<slot name="merchant">
				<view class="merchant">
					<image src="../../static/img/icon4.png" mode="" class="merchant-pic"></image>
					<view class="merchant-text">
						<view class="merchant-name">
							<text>N多寿司(新世界店)</text>
						</view>
						<view class="merchant-messige">
							<text>店铺ID:839283</text><text class="marginleft">到期时间:2021-03-10</text>
						</view>
					</view>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	import topbar from "../topnav/topnav.vue"
	export default {
		components:{topbar},
		data() {
			return {
				navHeight: '', //整体顶部导航栏的高度
				statusBarHeight: '20', //状态栏高度
			}
		},
		onLoad() {
			//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
			let {
				statusBarHeight,
				system
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
			console.log(this.navHeight, this.statusBarHeight)
		},
		methods: {
			//返回上一层页面
			back() {
				uni.navigateBack()
			},
		},

	}
</script>

<style lang="scss" scoped>
	.conten{
		height: 383rpx;
		// background-image: url(../../static/img/background.png);
	}
	.navbar{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		background-image: url(../../static/img/background.png);
		
		.nav-icon {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		
		padding: 60rpx 0;
		padding-bottom: 83rpx;
		

		.icon-one {
			width: 18rpx;
			height: 30rpx;
			margin-left: 30rpx;
		}

		.iconright {
			display: flex;
			align-items: center;

			.icon-two {
				width: 38rpx;
				height: 38rpx;
			}

			.icon-three {
				width: 40rpx;
				height: 8rpx;
				margin: 0 30rpx;
			}
		}
	}
	.merchant {
		display: flex;
		width: 690rpx;
		margin: 0 auto;
		padding-bottom: 60rpx;
	
		.merchant-pic {
			width: 100rpx;
			height: 100rpx;
		}
	
		.merchant-text {
			margin-left: 35rpx;
	
			.merchant-name {
				font-size: 38rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
	
			.merchant-messige {
				color: #999999;
				font-size: 24rpx;
	
				.marginleft {
					margin-left: 45rpx;
				}
			}
		}
	}
	}
</style>
